/**
 * 功能描述: 基础水平时间线样式表
 * @author 崔孝楠
 * @date 2022/9/22 9:04
 * @version 1.0
 */
@import '../../style/index';
//水平时间线布局
@mixin horizontal-timeline--layout {
  height: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  box-sizing: border-box;
  line-height: $line-height-base;
  margin: 0;
  padding: 0;
}
// 子元素布局
@mixin horizontal-timeline-item--layout {
  position: relative;
  margin: 0;
  padding-bottom: 20px;
  display: inline-block;
}
// 轨道布局
@mixin horizontal-timeline-item-tail--layout {
  position: absolute;
  top: 4px;
  width: calc(100%);
}
// 节点布局
@mixin horizontal-timeline-item-head--layout {
  position: absolute;
  left: 50%;
  width: 10px;
  height: 10px;
}
// 水平时间线样式
@include b(horizontal-timeline) {
  color: $color-text-primary;
  font-size: $font-size-base;
  font-variant: tabular-nums;
  font-feature-settings: 'tnum';
  list-style: none;
  @include horizontal-timeline--layout;
}
// 子元素样式
@include b(horizontal-timeline-item) {
  font-size: $font-size-base;
  list-style: none;
  @include horizontal-timeline-item--layout;
}
// 轨道样式
@include b(horizontal-timeline-item-tail) {
  border-bottom: 2px solid $border-color-lighter;
  @include horizontal-timeline-item-tail--layout;
}
// 节点样式
@include b(horizontal-timeline-item-head) {
  background-color: $color-white;
  border: 2px solid $color-primary;
  border-radius: 100px;
  color: $color-primary;
  @include horizontal-timeline-item-head--layout;
}
// 文字内容在下边布局
@include b(horizontal-timeline-item-content) {
  position: relative;
  top: 50%;
  margin: 0 10px;
  word-break: break-word;
}
// 文字交替出现布局
@include b(horizontal-timeline-alternate) {
  .#{$namespace}-horizontal-timeline-item-tail,
  .#{$namespace}-horizontal-timeline-item-head {
    top: 50%;
  }
  // 节点
  @include b(horizontal-timeline-item-head) {
    margin-top: -4px;
  }
  // 文字在上边
  @include b(horizontal-timeline-item-up) {
    @include b(horizontal-timeline-item-content) {
      top: 0;
    }
  }
  // 文字在下边
  @include b(horizontal-timeline-item-down) {
    @include b(horizontal-timeline-item-content) {
      top: 100%;
    }
  }

}
// 文字内容在上边布局
@include b(horizontal-timeline-up) {
  // 节点
  @include b(horizontal-timeline-item-head) {
    top: calc(50% - 4px - 2px);

  }
  // 轨道
  @include b(horizontal-timeline-item-tail) {
    top: calc(50% - 2px);
  }
  // 文字
  @include b(horizontal-timeline-item-content) {
    top: 0;
  }
}
